<template>
    <div>
        <div class="index1">
            <div class="w1">
                <p>百科</p>
            </div>
            <div class="w2">
                <div class="w2_1" v-for="it,i in Encyclopediadata" :key="i">
                    <img :src="it.img" alt="">
                    <p>{{it.title}}</p>
                </div>
            </div>
            <!-- <div class="w3">
                <p>查看全部</p>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 百科数据
            Encyclopediadata: [
                {id: 1, img: 'https://uploadstatic.mihoyo.com/ys-obc/2020/07/09/408757/f8d26d6a9ed0fcba7ab012e03650ea50_2876146447851098207.png', title: '丘丘图腾围栏1'},
                {id: 2, img: 'https://uploadstatic.mihoyo.com/ys-obc/2020/07/09/408757/f8d26d6a9ed0fcba7ab012e03650ea50_2876146447851098207.png', title: '丘丘图腾围栏2'},
                {id: 3, img: 'https://uploadstatic.mihoyo.com/ys-obc/2020/07/09/408757/f8d26d6a9ed0fcba7ab012e03650ea50_2876146447851098207.png', title: '丘丘图腾围栏3'}
            ],
        }
    }
}
</script>

<style lang="less" scoped>
    .index1 {
        // border: 1px solid red;
        margin-top: 20px;
        border-radius: 6px;
        background-color: #fff;
        padding: 10px;
        // display: flex;
        .w1 {
            // border: 1px solid red;
        }
        .w2 {
            // border: 1px solid red;
            padding-bottom: 20px;
            border-bottom: 1px solid #ccc;
            margin-top: -10px;
            display: flex;
            flex-wrap: wrap;
            // justify-content: center;
            .w2_1 {
                // border: 1px solid red;
                background-color: rgb(240, 240, 240);
                border-radius: 6px;
                margin-left: 10px;
                margin-top: 10px;
                display: flex;
                align-items: center;
                width: 330px;
                cursor: pointer;
                img {
                    object-fit: cover;
                    width: 40px;
                    height: 40px;
                    border-radius: 6px;
                }
                p {
                    margin-left: 10px;
                }
            }
        }
        // .w3 {
        //     text-align: center;
        //     color: #999;
        //     cursor: pointer;
        // }
    }
</style>